<template>
  <div class="logo">
    <router-link :to="{ name: 'dashboard' }">
      <!--/*给logo添加样式，当侧边栏缩小为只显示图标的时候，让logo左移*/-->
      <img src="~@/assets/logo.png" alt="logo" :style="{ height: '45px', marginLeft: collapsed ? '-16px' : '30px' }" />
      <h1 v-if="showTitle">{{ title }}</h1>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Logo',
  props: {
    title: {
      type: String,
      default: '',
      required: false,
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
}
</script>
<style lang="scss" scoped>
/*缩小首页布 局顶部的高度*/
$height: 59px;

.sider {
  box-shadow: none !important;
  .logo {
    height: $height !important;
    line-height: $height !important;
    box-shadow: none !important;
    transition: background 300ms;

    img {
      -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
      -o-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s;
    }
    a {
      color: white;
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &.light .logo {
    background-color: #1890ff;
  }
}
</style>